{%extend name="home/layout/layout"/%}
{%block name="header"%}{%/block%}
{%block name="content"%}
<div id="page-wrapper">
    <div class="container-fluid">
        <div class="pannel panel-primary">
            <div class="panel-heading">jquery.form.js</div>
            <div class="panel-body">
                <form id="myFormId" action="/common/uploadimage" enctype="multipart/form-data" method="post">
                    <input id="name" type="text" name="name" />
                    <input id="sex" type="text" name="sex" />
                    <button type="submit" id="btnSubmit">提交1</button>
                </form>
            </div>
        </div>
        <div class="pannel panel-primary">
            <div class="panel-heading">select 2</div>
            <div class="panel-body">
                <select class="js-example-basic-single js-states form-control col-md-10" id="id_label_single">
                </select>
            </div>
        </div>

        <div class="pannel panel-primary">
            <div class="panel-heading">多级菜单</div>
            <div class="panel-body">
                <div id="treeview-expandible" class=""></div>
            </div>
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</div>
<link href="/static/home/vendor/bootstrap-treeview/dist/bootstrap-treeview.min.css" rel="stylesheet">
<script src="/static/home/vendor/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
<script src="/static/home/vendor/jquery/jquery.form.js"></script>
<link href="//cdn.bootcss.com/select2/4.0.3/css/select2.css" rel="stylesheet">
<script src="//cdn.bootcss.com/select2/4.0.3/js/select2.js"></script>

<script type="text/javascript">

    var data = [
        {'id':4, 'text':'P3'},
        {'id':5, 'text': 'P4'},
        {
            text: 'Default',
            children: [
                {
                    id: '1',
                    text: 'Option'
                }
            ]
        }
    ];
    var myobj;
    $.ajax({
        url : '/home/hometestdata',
        timeout : 100000,
        type : 'get',
        dataType : 'json',
        data : {
        },
        success : function (rs) {
            //console.log(eval(rs));
            //myobj=eval(rs);
            console.log(typeof ( rs.data ))

            for(var i=0; i< rs.data.length;i++){
                console.log(rs.data[i].id)
            }
/*
            data = [
                        {'id':4, 'text':'P3'},
                        {'id':5, 'text': 'P4'},
                        [
                            {'text':'p5',
                            'children': [
                                {'id':4, 'text':'P3'},
                            }
                        ]
            ];
            */
            console.log(rs.data)
            console.log(data)
            $(".js-example-basic-single").select2({
                data: rs.data
            })

            if (rs.errno != 0) {
                toastr.error(rs);
                return false;
            }

        },
        error : function () {
            toastr.error('系统错误');
        }
    });
    //data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];


    /*
    * $('#ajaxForm').submit()出发表单提交操作
    * $('#ajaxForm').submit(function(){*****})定义提交操作的处理函数-----需要手动再触发提交
    * $('#ajaxForm').formSerialize(); 表单数据序列化
    * $('#ajaxForm #sex').fieldSerialize(); 表单某一个值序列化
    * $('#myFormId :text').fieldValue() 表单值 $('#myFormId #name').fieldValue()
    * $('#myFormId').resetForm(); 清空
    * */
    $(document).ready(function() {
        var $expandibleTree = $('#treeview-expandible').treeview({
            data: defaultData,
            collapseAll:true,
            onNodeCollapsed: function(event, node) {
                //$('#expandible-output').prepend('<p>' + node.text + ' was collapsed</p>');
            },
            onNodeExpanded: function (event, node) {
                //$('#expandible-output').prepend('<p>' + node.text + ' was expanded</p>');
            }
        });













        var options = {
            target:        '#output1',   // target element(s) to be updated with server response
            beforeSubmit:  validate,  // pre-submit callback
            success:       showResponse,  // post-submit callback
            dataType:      'json',
            data: {'test': 'test'},      //额外附加的参数
            // other available options:
            //url:       url         // override for form's 'action' attribute
            //type:      type        // 'get' or 'post', override for form's 'method' attribute
            //dataType:  json,        // 'xml', 'script', or 'json' (expected server response type)
            //clearForm: true        // clear all form fields after successful submit
            //resetForm: true        // reset the form after successful submit
            // $.ajax options can be used here too, for example:
            //timeout:   3000
        };
        // bind form using 'ajaxForm'
        //$('#myFormId').ajaxForm(options);
        $("#myFormId").submit(function () {
            $(this).ajaxSubmit(options);
            return false;
        });

    });

    function validate(formData, jqForm, options) {
        // formData is an array of objects representing the name and value of each field
        // that will be sent to the server;  it takes the following form:
        //
        // [
        //     { name:  username, value: valueOfUsernameInput },
        //     { name:  password, value: valueOfPasswordInput }
        // ]
        //
        // To validate, we can examine the contents of this array to see if the
        // username and password fields have values.  If either value evaluates
        // to false then we return false from this method.
        console.log(formData)
        for (var i=0; i < formData.length; i++) {
            if (!formData[i].value) {
                alert('Please enter a value for both Username and Password');
                return false;
            }
        }
        alert('Both fields contain values.');
    }

    function showRequest(formData, jqForm, options) {
        // formData is an array; here we use $.param to convert it to a string to display it
        // but the form plugin does this for you automatically when it submits the data
        var queryString = $.param(formData);

        // jqForm is a jQuery object encapsulating the form element.  To access the
        // DOM element for the form do this:
        // var formElement = jqForm[0];

        //alert('About to submit: \n\n' + queryString);

        // here we could return false to prevent the form from being submitted;
        // returning anything other than false will allow the form submit to continue
        return true;
    }

    // post-submit callback
    function   showResponse (responseText, statusText, xhr, $form)  {
        // for normal html responses, the first argument to the success callback
        // is the XMLHttpRequest object's responseText property

        // if the ajaxForm method was passed an Options Object with the dataType
        // property set to 'xml' then the first argument to the success callback
        // is the XMLHttpRequest object's responseXML property

        // if the ajaxForm method was passed an Options Object with the dataType
        // property set to 'json' then the first argument to the success callback
        // is the json data object returned by the server
        //console.log(responseText);
        console.log(responseText);
        //alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +'\n\nThe output div should have already been updated with the responseText.');
    }
    function processJson(data) {
        console.log('========');
        // 'data' is the json object returned from the server
        console.log(data.data.url);
    }

    var defaultData = [
        {
            text: 'Parent 1',
            href: '#parent1',
            tags: ['4'],
            nodes: [
                {
                    text: 'Child 1',
                    href: '#child1',
                    tags: ['2'],
                    nodes: [
                        {
                            text: 'Grandchild 1',
                            href: '#grandchild1',
                            tags: ['0']
                        },
                        {
                            text: 'Grandchild 2',
                            href: '#grandchild2',
                            tags: ['0']
                        }
                    ]
                },
                {
                    text: 'Child 2',
                    href: '#child2',
                    tags: ['0']
                }
            ]
        },
        {
            text: 'Parent 2',
            href: '#parent2',
            tags: ['0']
        },
        {
            text: 'Parent 3',
            href: '#parent3',
            tags: ['0']
        },
        {
            text: 'Parent 4',
            href: '#parent4',
            tags: ['0']
        },
        {
            text: 'Parent 5',
            href: '#parent5'  ,
            tags: ['0']
        }
    ];
</script>
{%/block%}

{%block name="footer"%}
{%/block%}

